<template>
  <el-container>
    <el-header>
      <el-menu 
      background-color="rgb(34, 62, 221)" 
      class="el-menu-demo" 
      mode="horizontal">
        <el-menu-item index="1"><i class="nav-icon el-icon-user"></i>用户</el-menu-item>
        <el-menu-item index="3"><i class="el-icon-s-check nav-icon"></i>教学</el-menu-item>
        <el-menu-item index="4"><i class="el-icon-s-check nav-icon"></i>题库</el-menu-item>
        <el-menu-item index="7"><i class="el-icon-s-marketing nav-icon"></i> 运营</el-menu-item>
        <el-menu-item index="3">营销</el-menu-item>
        <el-menu-item index="4">商品</el-menu-item>
        <el-menu-item index="7">财务</el-menu-item>
        <el-menu-item index="3">统计</el-menu-item>
        <el-menu-item index="8">系统</el-menu-item>
      </el-menu>
    </el-header>
    <el-container>
      <el-aside width="200px">
       <el-menu
          default-active="2"
          class="el-menu-vertical-demo">
          <el-menu-item index="2">
            <template #title>学员管理</template>
          </el-menu-item>
          <el-menu-item index="3">
            <template #title>讲师管理</template>
          </el-menu-item>
          <el-menu-item index="4">
            <template #title>助教管理</template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { ElContainer, ElAside, ElMain, ElHeader, ElMenu, ElMenuItem } from 'element-plus'
export default {
  name: 'App',
  components: {
    ElContainer,
    ElAside,
    ElMain,
    ElHeader,
    ElMenu,
    ElMenuItem
  },
  data() {
    return {
      activeIndex: 0
    }
  }
}
</script>
